import Taro, { Component, Config } from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import {AtList, AtListItem} from "taro-ui";
import './User.scss';

import img from '../img';

class User extends Component {

  config: Config = {
    navigationBarBackgroundColor: '#ff4b82',
    navigationBarTextStyle: "white",
    navigationBarTitleText: '我的'
  };

  state = {
    User: {
      UserName: "昵称",
      UserUrl:'',
      Invitation: 'XV37LA',
      TodayProfit: 0.01,
      YesterdayProfit: 0.01,
      ThisMonthProfit: 0.02,
      LastMonthProfit: 0.01,
    },
    list:[
      {title:'全部订单',img:''},
      {title:'付款订单',img:''},
      {title:'结算订单',img:''},
      {title:'失效订单',img:''},
    ]
  };

  godetail = (id) =>{
    let url;
    switch (true){
      case id===0:
        url='/pages/Profit/Profit';
        break;
      case id===1:
        url='';
        break;
      case id===2:
        url='';
        break;
      case id>=3:
        url='/pages/Order/Order?id='+id;
        break;
    }

    Taro.navigateTo({url})
  };

  render() {
    const { User,list } = this.state;
    return (
      <View style="padding-bottom:15px">
        <View className="Header">

          <View className="Header_Top">
            <View className='userImg'><Image src={User.UserUrl || img.me}  /></View>
            <View className="userInfo">
              <View className="UserName">{User.UserName}</View>
              <View>通过折草累计收益{280}元</View>
            </View>
          </View>

          <View className="Header_Center" onClick={this.godetail.bind(this,0)}>
            <View className="profit">
              <View className="Profit_Text">{User.TodayProfit}</View>
              <View>今日收益</View>
            </View>
            <View className="profit">
              <View className="Profit_Text">{User.YesterdayProfit}</View>
              <View>昨日收益</View>
            </View>
            <View className="profit">
              <View className="Profit_Text">{User.ThisMonthProfit}</View>
              <View>本月收益</View>
            </View>
            <View className="profit">
              <View className="Profit_Text">{User.LastMonthProfit}</View>
              <View>上月收益</View>
            </View>
          </View>

        </View>

        <View className='content'>
          <AtList>
            <AtListItem
              title='我的粉丝'
              arrow='right'
              thumb={img.icon3}
              hasBorder={false}
              onClick={this.godetail.bind(this,1)}
            />
          </AtList>
          <AtList>
            <AtListItem
              title='我的收益'
              arrow='right'
              thumb={img.icon4}
              hasBorder={false}
              onClick={this.godetail.bind(this,2)}
            />
          </AtList>
        </View>

        <View className='content1'>
          {
            list.map((item,index)=>(
              <AtList key={index} >
                <AtListItem
                  title={item.title}
                  arrow='right'
                  thumb={img[`icon${index+7}`]}
                  hasBorder={false}
                  onClick={this.godetail.bind(this,3+index)}
                />
              </AtList>
            ))
          }

        </View>

        <View className='content1'>
          <AtList>
            <AtListItem
              title='邀请好友'
              arrow='right'
              thumb={img.icon5}
              hasBorder={false}
              onClick={this.godetail.bind(this,1)}
            />
          </AtList>
          <AtList>
            <AtListItem
              title='联系客服'
              arrow='right'
              thumb={img.icon6}
              hasBorder={false}
              onClick={this.godetail.bind(this,1)}
            />
          </AtList>
        </View>

      </View>
    )
  }
}

export default User;
